<template>
  <div ref="echartRef" :style="{width:props.width,height:props.height}" class="flex-row-center">

  </div>
</template>

<script lang="ts" setup>
// 图例
import {onMounted, ref, defineProps, reactive, watch, onUnmounted} from "vue";
import * as echarts from "echarts";
import {ChartData} from "@/ts/chart";

let props=defineProps<{
  width:string,
  height:string,
  data:Array<ChartData>
  title:string
}>()
let chart: echarts.ECharts
const echartRef=ref()
const echartOption=reactive({
      title: {
        text: props.title,
        left: "center",
      },
      series: [
        {
          type: 'pie',
          data: props.data,
          radius: '50%'
        }
      ]
    })


function setChart(){
  chart.setOption(echartOption)
}
onMounted(()=>{
  chart=echarts.init(echartRef.value)
  setChart()
})

onUnmounted(()=>{
  chart.dispose()
})
watch(()=>props.data,(newV)=>{

  echartOption.series[0].data=newV
  setChart()
})

</script>

<style scoped lang="less">

</style>